<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<style>
			img{
				width: 300px;
				height: 300px;
			}
			ul{
				list-style-type: none;
				width: 306px;
				height: 300px;
				padding: 3px;
				margin: 3px;
			}
			li{
				border: 3px solid #55aaff;
			}
			.show{
				display: block;
			}
			.hide{
				display: none;
			}
		</style>
		<script>
			function lunbo(){
				//轮播次数
				var index = 0;
				var id = setInterval(function(){
					//记录轮播次数
					index++
					//通过标签名获取li数组
					var lis = document.getElementsByTagName("li")
					//隐藏全部图片
					for(var i = 0;i < lis.length;i++){
						lis[i].className = "hide"
					}
					//显示本次li
					
					var n = index % lis.length
					lis[n].className = "show"
				},1500)
			}
		</script>
	</head>
	<!-- onload页面加载时触发 -->
	<body onload="lunbo()">
		<ul onmouseover="alert('来了')"  onmouseout="alert('走了')">
			<li class="show">
				<img src="img/食物/食物1.jpg" alt="">
			</li>
			<li class="hide">
				<img src="img/食物/食物2.jpg" alt="">
			</li>
			<li class="hide">
				<img src="img/食物/食物3.jpg" alt="">
			</li>
			<li class="hide">
				<img src="img/食物/食物4.jpg" alt="">
			</li>
		</ul>
	</body>
</html>